<template>
  <div
    style="width: 100%;display: flex;background: #fff;flex-direction: column;
    border-radius: 0px 0px 20px 20px;"
  >
    <div
      style="background-color: #fff;height: 58px;display: flex;align-items: center;z-index:999;position:sticky;width:100%;top:0;"
    >
      <div
        style="display:flex;font-family: PingFangSC-Medium;font-size: 20px;
                     color: #454592;letter-spacing: 0.38px;text-align: justify;line-height: 30px;margin:12px 0 12px 28px;
                     width: 149px;height: 34px;background: rgba(69,69,146,0.06);border-radius: 17.5px;margin-left: 12px;"
      >
        <div
          style="width: 78%;display: flex;justify-content: center;align-items: center"
        >{{cal_label}}</div>
        <div style="width: 20%;display: flex;justify-content: center;align-items: center;">
          <img :src="down_cc" style="width: 24px;height: 24px;" />
        </div>
      </div>
      <div
        style="position: absolute;right: 20px;font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;line-height: 16px;"
      >
        <img :src="Combined" style="width: 11.2px;height: 12px;" />
        {{buName}}
      </div>
    </div>
    <div style="width: 100%;display: flex;">
      <div style="width: 80%;">
        <div style="padding:0px 10px 20px 26px;display: flex;flex-wrap: wrap;">
          <div
            style="width:9vw;height: 9vw;display: flex;justify-content: center;align-items: center;font-family: PingFangSC-Regular;font-size: 14px;color: #666666;letter-spacing: 0.26px;text-align: justify;border-radius: 50%;"
            v-for="(item,index) in dayList"
            :key="index"
            :style="{background:value==item.day?'#31317E':'',color:value==item.day?'#fff':''}"
            @click="$emit('change',item.day)"
          >{{item.idx}}</div>
        </div>
      </div>
      <div style="display: flex;flex-direction: row;width: 19%;">
        <div style="margin-right:20px;">
          <img :src="left_icon" style="width: 16px;height: 16px;" @click="changeDate('preMonth')" />
        </div>
        <div>
          <img :src="right_icon" style="width: 16px;height: 16px;" @click="changeDate('nextMonth')" />
        </div>
      </div>
    </div>

    <br />
  </div>
</template>

<script>
import left_icon from "@assets/icon/chevron_left.svg";
import right_icon from "@assets/icon/chevron_right.svg";
import down_cc from "@assets/icon/37.svg";
import dayjs from "dayjs";
import Combined from "@assets/icon/Combined Shape.svg";

export default {
  name: "dashboard_calendar",
  props: {
    value: String,
  },
  model: {
    props: "value",
    event: "change",
  },
  data() {
    return {
      Combined: Combined,
      buName: sessionStorage.getItem("email"),
      down_cc: down_cc,
      right_icon: right_icon,
      left_icon: left_icon,
      yearn: 0,
      month: 0,
      monthList: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
      dayList: [],
      cal_label: "",
    };
  },
  methods: {
    // 根据年月日获得为星期几
    getWeekDay(year, month, day) {
      return new Date(`${year}/${month}/${day}`).getDay();
    },
    init() {
      if (
        (this.year % 4 === 0 && this.year % 100 !== 0) ||
        this.year % 400 === 0
      ) {
        this.monthList[1] = 29;
      } else {
        this.monthList[1] = 28;
      }
      // 获得指定年月的1号是星期几
      const firstDay = this.getWeekDay(this.year, this.month, 1);
      // 在1号前面填充多少个上个月的日期
      this.weekDay = firstDay === 7 ? 0 : firstDay;
      // 获得最后一天是星期几，往后填充多少个
      const remineDay = this.getWeekDay(
        this.year,
        this.month,
        this.monthList[this.month - 1]
      );
      this.lastWeekDay = remineDay === 7 ? 6 : 6 - remineDay;
      this.dayList = [];
      for (let i = 1; i <= this.monthList[this.month - 1]; i++) {
        this.dayList.push({ idx: i, day: `${this.year}-${this.month}-${i}` });
      }
    },
    changeDate(type) {
      switch (type) {
        case "preMonth":
          // 当前月份为1月， 上一个月分为12月，年份减1
          if (this.month === 1) {
            this.month = 12;
            this.year -= 1;
          } else {
            this.month -= 1;
          }
          this.cal_label =
            this.year +
            "/" +
            (this.month.length > 1 ? this.month : "0" + this.month);
          break;
        case "nextMonth":
          // 当前月份为12月， 下个月分为1月，年份加1
          if (this.month === 12) {
            this.month = 1;
            this.year += 1;
          } else {
            this.month += 1;
          }
          this.cal_label =
            this.year + "/" + (this.month > 9 ? this.month : "0" + this.month);
          break;
        default:
          break;
      }
      this.init();
    },
  },
  mounted() {
    this.year = Number(this.value.split("-")[0]);
    this.month = Number(this.value.split("-")[1]);
    this.cal_label = dayjs(this.value).format("YYYY/MM");
    this.init();
  },
  watch: {
    value(val) {
      this.year = Number(this.value.split("-")[0]);
      this.month = Number(this.value.split("-")[1]);
      this.init();
      this.cal_label = dayjs(val).format("YYYY/MM");
    },
  },
};
</script>
